﻿<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>impression</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico" />

    <link rel="stylesheet" th:href="@{/assets/css/vendor/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/vendor/icofont.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/plugins/animate.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/swiper-bundle.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/nice-select.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/venobox.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <!--        <link rel="stylesheet" th:href="@{/assets/css/typo.css}">-->
    <link rel="stylesheet" th:href="@{/assets/prism/prism.css}">
</head>

<body>

    <main class="main-wrapper">
        <!-- .....:::::: Start Header Section :::::.... -->
        <header class="header-section sticky-header d-none d-lg-block">
            <div class="header-wrapper">
                <div class="container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col">
                            <!-- Start Header Logo -->
                            <a href="index.html" class="header-logo">
                                <img src="assets/images/logo/logo.png" alt="">
                            </a>
                            <!-- End Header Logo -->
                        </div>
                        <div class="col-auto">
                            <!-- Start Header Menu -->
                            <ul class="header-nav">
                                <li><a th:href="@{/index}">首页</a></li>
                                <li class="has-dropdown">
                                    <a th:href="@{/skill}">我的技能</a>
                                </li>
                                <li class="has-dropdown">
                                    <a th:href="@{/blog}">博客</a>
                                </li>
                                <li><a th:href="@{/project}">项目</a></li>
                                <li class="has-dropdown">
                                    <a href="#">其它</a>
                                    <ul class="submenu">
                                        <li><a th:href="@{/about}">关于我</a></li>
<!--                                        <li><a th:href="@{/contact}">联系我</a></li>-->
                                    </ul>
                                </li>
                            </ul>

                            <!-- End Header Menu -->
                        </div>

                        <div class="col">
                            <div class="header-btn-link text-end">
                                <a th:href="@{/about}" class="btn btn-sm btn-outline-one icon-space-left"> About Me <i class="icofont-double-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- .....:::::: End Header Section :::::.... -->

        <!-- .....:::::: Start Mobile Header Section :::::.... -->
        <div class="mobile-header d-block d-lg-none">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col">
                        <div class="mobile-logo">
                            <a href="index.html"><img src="assets/images/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mobile-action-link text-end">
                            <a href="#mobile-menu-offcanvas" class="offcanvas-toggle offside-menu"><i class="icofont-navigation-menu"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- .....:::::: Start MobileHeader Section :::::.... -->

        <!--  Start Offcanvas Mobile Menu Section -->
        <div id="mobile-menu-offcanvas" class="offcanvas offcanvas-rightside offcanvas-mobile-menu-section">
            <!-- Start Offcanvas Header -->
            <div class="offcanvas-header text-right">
                <button class="offcanvas-close"><i class="icofont-close-line"></i></button>
            </div> <!-- End Offcanvas Header -->
            <!-- Start Offcanvas Mobile Menu Wrapper -->
            <div class="offcanvas-mobile-menu-wrapper">
                <!-- Start Mobile Menu  -->
                <div class="mobile-menu-bottom">
                    <!-- Start Mobile Menu Nav -->
                    <div class="offcanvas-menu">
                        <ul>

                            <li><a th:href="@{/index}">首页</a></li>

                            <li>
                                <a th:href="@{skill}"><span>技能</span></a>

                            </li>
                            <li>
                                <a th:href="@{blog}" href="#"><span>博客</span></a>
                            </li>
                            <li><a th:href="@{/project}">项目</a></li>
                            <li>
                                <a th:href="@{about}"><span>关于我</span></a>
                            </li>
                        </ul>
                    </div> <!-- End Mobile Menu Nav -->

                </div> <!-- End Mobile Menu -->

                <!-- Start Mobile contact Info -->
                <div class="mobile-contact-info text-center">
                    <ul class="social-link">
                        <li><a target="_blank" href="https://example.com"><i class="icofont-facebook"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-twitter"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-skype"></i></a></li>
                    </ul>
                </div>
                <!-- End Mobile contact Info -->

            </div> <!-- End Offcanvas Mobile Menu Wrapper -->
        </div>
        <!-- ...:::: End Offcanvas Mobile Menu Section:::... -->

        <!-- Offcanvas Overlay -->
        <div class="offcanvas-overlay"></div>

        <!-- ...::: Start Breadcrumb Section :::... -->
        <div class="breadcrumb-section section-bg overflow-hidden pos-relative">
            <div class="breadcrumb-shape-top-left"></div>
            <div class="breadcrumb-shape-bottom-right"></div>
            <div class="breadcrumb-box">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb-content">
                                <h2 class="title">项目</h2>
                                <ul class="breadcrumb-link">
                                    <li><a th:href="@{/index}">首页</a></li>
                                    <li class="active" aria-current="page">我的项目</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Breadcrumb Section :::... -->

        <!-- .....:::::: Start Project Section :::::.... -->
        <div class="project-section section-gap-tb-165">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="projects-gallery-filter-nav">
                            <button class="btn btn-outline-secondary active" data-filter="*">所有</button>
                            <button class="btn btn-outline-secondary" th:data-filter="'.后端'">后端</button>
                            <button class="btn btn-outline-secondary" th:data-filter="'.前端'">前端</button>
                            <button class="btn btn-outline-secondary" data-filter=".爬虫">爬虫</button>
                            <button class="btn btn-outline-secondary" data-filter=".other">其它</button>
                        </div>
                    </div>
                    <!-- 项目内容 -->
                    <div class="col-12">
                        <div class="projects-wrapper-gallery-content">
                            <div class="row" th:each="project, index : ${projects}">
                                <div th:class="'col-md-6 filter-item'" th:classappend="${project.category.name}">

                                    <!-- Start Project Box Single Item -->
                                    <div class="project-box-single-item">
                                        <div class="img-box">
                                            <div class="bg-overlay"></div>
                                            <div class="bg-image">
                                                <img th:src="${project.cover}" src="assets/images/project/project-slider-img-1.jpg" alt="">
                                            </div>
                                            <div class="image">
                                                <img th:href="@{ /project/{projectId}/details( projectId = ${ project.getId() } ) }" th:src="${project.cover}" src="assets/images/project/project-slider-img-1.jpg" alt="">
                                            </div>
                                        </div>
                                        <div class="content">
                                            <h4 class="title"><a th:href="@{ /project/{projectId}/details( projectId = ${ project.getId() } )}" href="pro-details"> [[ ${ project.name } ]] </a></h4>

                                            <ul class="catagory-nav-item">
                                                <li  th:each="tag : ${project.tag}"><a href="">[[ ${ tag.name } ]]</a></li>
<!--                                                <li><a href="">Fund Rising</a></li>-->
<!--                                                <li><a href="">Non Profit</a></li>-->
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- End Project Box Single Item -->
                                </div>
<!--                                <div class="col-md-6 filter-item 后端">-->
<!--                                    &lt;!&ndash; Start Project Box Single Item &ndash;&gt;-->
<!--                                    <div class="project-box-single-item">-->
<!--                                        <div class="img-box">-->
<!--                                            <div class="bg-overlay"></div>-->
<!--                                            <div class="bg-image">-->
<!--                                                <img src="assets/images/project/project-slider-img-2.jpg" alt="">-->
<!--                                            </div>-->
<!--                                            <div class="image">-->
<!--                                                <img src="assets/images/project/project-slider-img-2.jpg" alt="">-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="project-details.html">Musion – Gardening HTML-->
<!--                                                Template</a></h4>-->

<!--                                            <ul class="catagory-nav-item">-->
<!--                                                <li><a href="">Chairty</a></li>-->
<!--                                                <li><a href="">Fund Rising</a></li>-->
<!--                                                <li><a href="">Non Profit</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; End Project Box Single Item &ndash;&gt;-->
<!--                                </div>-->
<!--                                <div class="col-md-6 filter-item 后端">-->
<!--                                    &lt;!&ndash; Start Project Box Single Item &ndash;&gt;-->
<!--                                    <div class="project-box-single-item">-->
<!--                                        <div class="img-box">-->
<!--                                            <div class="bg-overlay"></div>-->
<!--                                            <div class="bg-image">-->
<!--                                                <img src="assets/images/project/project-slider-img-3.jpg" alt="">-->
<!--                                            </div>-->
<!--                                            <div class="image">-->
<!--                                                <img src="assets/images/project/project-slider-img-3.jpg" alt="">-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="project-details.html">SEOLLY - SEO Marketing &-->
<!--                                                Digital Agency</a></h4>-->

<!--                                            <ul class="catagory-nav-item">-->
<!--                                                <li><a href="">Chairty</a></li>-->
<!--                                                <li><a href="">Fund Rising</a></li>-->
<!--                                                <li><a href="">Non Profit</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; End Project Box Single Item &ndash;&gt;-->
<!--                                </div>-->
<!--                                <div class="col-md-6 filter-item 前端">-->
<!--                                    &lt;!&ndash; Start Project Box Single Item &ndash;&gt;-->
<!--                                    <div class="project-box-single-item">-->
<!--                                        <div class="img-box">-->
<!--                                            <div class="bg-overlay"></div>-->
<!--                                            <div class="bg-image">-->
<!--                                                <img src="assets/images/project/project-slider-img-4.jpg" alt="">-->
<!--                                            </div>-->
<!--                                            <div class="image">-->
<!--                                                <img src="assets/images/project/project-slider-img-4.jpg" alt="">-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="project-details.html">Virtuf - Creative Agency-->
<!--                                                Bootstrap 5 Template</a></h4>-->

<!--                                            <ul class="catagory-nav-item">-->
<!--                                                <li><a href="">Chairty</a></li>-->
<!--                                                <li><a href="">Fund Rising</a></li>-->
<!--                                                <li><a href="">Non Profit</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; End Project Box Single Item &ndash;&gt;-->
<!--                                </div>-->
<!--                                <div class="col-md-6 filter-item 前端">-->
<!--                                    &lt;!&ndash; Start Project Box Single Item &ndash;&gt;-->
<!--                                    <div class="project-box-single-item">-->
<!--                                        <div class="img-box">-->
<!--                                            <div class="bg-overlay"></div>-->
<!--                                            <div class="bg-image">-->
<!--                                                <img src="assets/images/project/project-slider-img-5.jpg" alt="">-->
<!--                                            </div>-->
<!--                                            <div class="image">-->
<!--                                                <img src="assets/images/project/project-slider-img-5.jpg" alt="">-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="project-details.html">Tourve - Travel Agency-->
<!--                                                Bootstrap 5 Template</a></h4>-->

<!--                                            <ul class="catagory-nav-item">-->
<!--                                                <li><a href="">Chairty</a></li>-->
<!--                                                <li><a href="">Fund Rising</a></li>-->
<!--                                                <li><a href="">Non Profit</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; End Project Box Single Item &ndash;&gt;-->
<!--                                </div>-->
<!--                                <div class="col-md-6 filter-item 前端">-->
<!--                                    &lt;!&ndash; Start Project Box Single Item &ndash;&gt;-->
<!--                                    <div class="project-box-single-item">-->
<!--                                        <div class="img-box">-->
<!--                                            <div class="bg-overlay"></div>-->
<!--                                            <div class="bg-image">-->
<!--                                                <img src="assets/images/project/project-slider-img-6.jpg" alt="">-->
<!--                                            </div>-->
<!--                                            <div class="image">-->
<!--                                                <img src="assets/images/project/project-slider-img-6.jpg" alt="">-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="project-details.html">Induste - Industrial &-->
<!--                                                Factory Bootstrap 5 Template</a></h4>-->

<!--                                            <ul class="catagory-nav-item">-->
<!--                                                <li><a href="">Chairty</a></li>-->
<!--                                                <li><a href="">Fund Rising</a></li>-->
<!--                                                <li><a href="">Non Profit</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; End Project Box Single Item &ndash;&gt;-->
<!--                                </div>-->
<!--                                <div class="col-md-6 filter-item 爬虫">-->
<!--                                    &lt;!&ndash; Start Project Box Single Item &ndash;&gt;-->
<!--                                    <div class="project-box-single-item">-->
<!--                                        <div class="img-box">-->
<!--                                            <div class="bg-overlay"></div>-->
<!--                                            <div class="bg-image">-->
<!--                                                <img src="assets/images/project/project-slider-img-7.jpg" alt="">-->
<!--                                            </div>-->
<!--                                            <div class="image">-->
<!--                                                <img src="assets/images/project/project-slider-img-7.jpg" alt="">-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="project-details.html">Consor - Multi Purpose One-->
<!--                                                Page PSD Template</a></h4>-->

<!--                                            <ul class="catagory-nav-item">-->
<!--                                                <li><a href="">Chairty</a></li>-->
<!--                                                <li><a href="">Fund Rising</a></li>-->
<!--                                                <li><a href="">Non Profit</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; End Project Box Single Item &ndash;&gt;-->
<!--                                </div>-->
<!--                                <div class="col-md-6 filter-item seo">-->
<!--                                    &lt;!&ndash; Start Project Box Single Item &ndash;&gt;-->
<!--                                    <div class="project-box-single-item">-->
<!--                                        <div class="img-box">-->
<!--                                            <div class="bg-overlay"></div>-->
<!--                                            <div class="bg-image">-->
<!--                                                <img src="assets/images/project/project-slider-img-8.jpg" alt="">-->
<!--                                            </div>-->
<!--                                            <div class="image">-->
<!--                                                <img src="assets/images/project/project-slider-img-8.jpg" alt="">-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="project-details.html">Asore - Business Bootstrap-->
<!--                                                5 Template</a></h4>-->

<!--                                            <ul class="catagory-nav-item">-->
<!--                                                <li><a href="">Chairty</a></li>-->
<!--                                                <li><a href="">Fund Rising</a></li>-->
<!--                                                <li><a href="">Non Profit</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; End Project Box Single Item &ndash;&gt;-->
<!--                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- .....:::::: End Project Section :::::.... -->

        <span th:replace="~{common::footer}"></span>


        <!-- material-scrolltop button -->
        <button class="material-scrolltop" type="button"></button>
    </main>

    <!-- Global Vendor, plugins JS -->

    <!-- JS Files
    ============================================ -->
    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>

    <!--Plugins JS-->
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.appear.min.js"></script>
    <script src="assets/js/plugins/jquery.nice-select.js"></script>
    <script src="assets/js/plugins/venobox.min.js"></script>
    <script src="assets/js/plugins/jquery.waypoints.js"></script>
    <script src="assets/js/plugins/images-loaded.min.js"></script>
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <script src="assets/js/plugins/counter.js"></script>
    <script src="assets/js/plugins/ajax-mail.js"></script>
    <script src="assets/js/plugins/material-scrolltop.js"></script>

    <!-- Minify Version -->
    <!-- <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script> -->

    <!--Main JS (Common Activation Codes)-->
    <script src="assets/js/main.js"></script>

</body>

</html>
